<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
    <div class="analysis">
      <div class="table mt20">
        <div class="top-filter flex-between mb10">
          <div
            class="strong fs16 mrSemiBold flex-center"
            style="color: #110000"
          >
            <div class="outer">
              <div class="inner"></div>
            </div>
            医废信息管理
          </div>
        </div>
        <!-- <a-button type="primary" @click="addData()">添加</a-button> -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="包裹id" width="150">
          </el-table-column>
          <el-table-column prop="classification" width="200" label="分类">
          </el-table-column>
          <el-table-column prop="department" label="科室" width="150">
          </el-table-column>
          <el-table-column prop="weight" label="重量-kg" width="150"> </el-table-column>
          <el-table-column prop="recycle_time" label="接收时间" width="250">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showDetail(scope.row)" type="text" size="small"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <a-modal
      :title="modalTitle"
      width="600px"
      :visible="addDialog"
      :okText="'提交'"
      @ok="handleOkAdd"
      @cancel="addDialog = false"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item
          prop="classification"
          label="分类"
        >
          <el-select style="width: 100%;" v-model="form.classification" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="department"
          label="科室"
        >
          <el-input v-model="form.department"></el-input>
        </el-form-item>
        <el-form-item
          prop="weight"
          label="重量-kg"
        >
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
      </el-form>
    </a-modal>

    <a-modal
      title="处理详情"
      width="600px"
      :visible="processDialog"
      :okText="'确定'"
      @ok="processDialog = false"
      @cancel="processDialog = false"
    >
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </a-modal>
  </a-spin>
</template>

<script>
import { getWasteInfo, addWasteInfo, getPackageTimeline, getAllStaffPost } from "../../../service";
import moment from "moment";
export default {
  name: "Analysis",
  i18n: require("./i18n"),
  data() {
    return {
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      spinning: false,
      processDialog: false,
      modalTitle: "",
      form: {
        classification: '',
        department: '',
        weight: '',
        recycleTime: '',
      },
      addDialog: false,
      typeList: ['感染性废物', '病理性废物', '药物性废物'],
      rules: {
        classification: [{ required: true, message: '不能为空', trigger: 'change' }],
        department: [{ required: true, message: '不能为空', trigger: 'change' }],
        weight: [{ required: true, message: '不能为空', trigger: 'change' }],
        recycleTime: [{ required: true, message: '不能为空', trigger: 'change' }],
      },
      userList: [],
      activities: []
    };
  },
  watch: {
    $route(to) {
      if (to.path === "/page/waste") {
        this.getAllData();
      }
    },
  },
  created() {
    this.getAllData();
    getAllStaffPost().then((user) => {
      this.userList = user.data.data;
    })
  },
  methods: {
    getAllData() {
      getWasteInfo().then((res) => {
        for (let item of res.data) {
          item.recycle_time = moment(item.recycle_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (!item.status || item.status === '待处理') {
            // 判断异常
            if (moment().diff(item.recycle_time, 'day') > 5) {
              item.status = '异常'
            }
          }
        }
        this.tableData = res.data;
      });
    },
    addClassName: (record, index) => {
      let rowClassName = "default";
      if (index % 2 === 0) {
        rowClassName = "primary";
      }
      return rowClassName;
    },
    addData(params = null) {
      this.modalTitle = "添加";
      if (params) {
        this.form = params;
      }
      this.addDialog = true;
    },
    handleOkAdd() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addWasteInfo({
            classification: this.form.classification,
            department: this.form.department,
            weight: this.form.weight,
            status: '',
            create_time: moment().format("YYYY-MM-DD HH:mm:ss"),
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("新增成功");
              this.addDialog = false;
              this.getAllData();
            }
          });
        }
      });
    },
    showDetail(row) {
      console.log(row)
      sessionStorage.setItem('package_id', row.id)
      this.$router.push('/page/process')
      // getPackageTimeline({
      //   package_id: row.id,
      //   status: row.status
      // }).then(res => {
      //   console.log(res)
      //   this.activities = []
      //   if (res.data && res.data.code === 500) {
      //     this.$message.error(res.data.msg)
      //   } else {
      //     if (res.data.stage) {
      //       this.activities.push({
      //         timestamp: res.data.stage[0].receive_time,
      //         content: `暂存人员：${this.userList.find(v => v.id === res.data.stage[0].receiver_id).name}`
      //       })
      //     }
      //     if (res.data.transport) {
      //       this.activities.push({
      //         timestamp: moment(res.data.transport[0].start_time).format('YYYY-MM-DD HH:mm:ss'),
      //         content: `转运人员：${this.userList.find(v => v.id == res.data.transport[0].transfer_person_id).name}`
      //       })
      //     }
      //     if (res.data.handle) {
      //       this.activities.push({
      //         timestamp: res.data.handle[0].receive_time,
      //         content: `转运人员：${this.userList.find(v => v.id == res.data.handle[0].receiver_id).name}`
      //       })
      //     }
      //     this.processDialog = true;
      //   }
      // })
    }
  },
};
</script>

<style lang="less" scoped>
.analysis {
  margin-top: 20px;
  border-radius: 10px;
  width: 100%;

  .right {
    padding: 20px;
  }

  .content {
    background: #ebebeb;
    height: 500px;
    padding: 12px;
    border-radius: 10px;
  }

  .top {
    & > div {
      width: 50%;
      padding: 20px 16px;
    }
    background: #fff;
    display: flex;
    border-radius: 10px;
  }
}

.diy-btn {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: auto;
  border-radius: 20px;
  cursor: pointer;
}
.diy-btn-hover:hover {
  color: #fff;
  background-color: #9254de;
  border-color: #9254de;
}
.danger-btn-hover:hover {
  color: #fff;
  background-color: #ff7875;
  border-color: #ff7875;
}
.black-btn-hover:hover {
  color: #fff;
  background-color: #655c5c !important;
  border-color: #655c5c;
}
.mt50 {
  margin-top: 50px;
}

.btns {
  width: 60%;
  margin-left: 20%;
  display: flex;
  justify-content: space-around;
  & > div {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
  }
}
.card-each {
  flex: 1;
  height: 80px;
  background: #fff;
  border-radius: 2px;
  padding: 20px;
}
.table {
  background: #fff;
  padding: 20px;
}
</style>
